<div data-token-type="<%= @type %>">
  <h6 class="dropdown-header">
    <%= @type %> (<span data-number-of-tokens-by-type="<%= @type %>"><%= Enum.count(@token_balances)%></span>)
  </h6>

  <%= for token_balance <- sort_by_name(@token_balances) do %>
    <div
      class="border-bottom"
      data-dropdown-token-balance-test
      data-token-name="<%= token_name(token_balance.token) %>"
      data-token-symbol="<%= token_balance.token.symbol %>"
    >
      <%= link(
            to: token_path(@conn, :show, token_balance.token.contract_address_hash),
            class: "dropdown-item"
          ) do %>
        <div class="row">
          <p class="mb-0 col-md-6"><%= token_name(token_balance.token) %></p>
          <%= if token_balance.token.usd_value do %>
            <p class="mb-0 col-md-6 text-right">
              <span data-selector="token-balance-usd" data-usd-value="<%= balance_in_usd(token_balance) %>"></span>
            </p>
          <% end %>
        </div>
        <div class="row">
          <p class="mb-0 col-md-6">
            <%= format_according_to_decimals(token_balance.value, token_balance.token.decimals) %> <%= token_balance.token.symbol %>
          </p>
          <%= if token_balance.token.usd_value do %>
            <p class="mb-0 col-md-6 text-right text-muted">
              <span data-selector="token-price" data-token-usd-value="<%= token_balance.token.usd_value %>"></span>
            </p>
          <% end %>
        </div>
      <% end %>
    </div>
  <% end %>
</div>
